<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @property --min {
      /* 实验性技术 */
      syntax: "<integer>";
      inherits: false;
      initial-value: 0;
    }

    @property --sec {
      /* 实验性技术 */
      syntax: "<integer>";
      inherits: false;
      initial-value: 0;
    }

    @property --ms {
      /* 实验性技术 */
      syntax: "<integer>";
      inherits: false;
      initial-value: 0;
    }

    @keyframes min {
      to {
        --min: 59
      }
    }

    @keyframes sec {
      to {
        --sec: 59
      }
    }

    @keyframes ms {
      to {
        --ms: 59
      }
    }

    .clock {
      counter-reset: min var(--min) sec var(--sec) ms var(--ms);
      animation: min 3600s infinite steps(60, end),
        sec 60s infinite steps(60, end),
        ms 1s infinite steps(100, end);
      animation-play-state: paused;

      &::before {
        content: counter(min, decimal-leading-zero)':' counter(sec, decimal-leading-zero)'.' counter(ms, decimal-leading-zero);
      }
    }

    .turn {

      &::before {
        content: '开始';
      }

    }

    #turn:checked {
      ~.clock {
        animation-play-state: running;
      }
      ~.turn::before {
        content: '暂停';
      }
      ~.clear {
        pointer-events: none;
        opacity: .65;
      }
    }
    .clear:active~.clock {
      animation: none;
    }

    .btn {
      color: rgb(56, 56, 56);
      display: inline-block;
      text-align: center;
      box-sizing: border-box;
      background-color: rgb(240, 240, 240);
      margin: 0em;
      padding: 0.2em;
      border: 1px solid rgb(56, 56, 56);
      border-radius: 2px;
    }
  </style>
</head>

<body>
  <!-- 开始/暂停 -->
  <input id="turn" type="checkbox" hidden>
  <label class="btn turn" for="turn"></label>
  <!-- 清空 -->
  <label class="btn clear">清空</label>
  <!-- 分秒毫秒 -->
  <p class="clock"></p>
</body>

</html>